<script setup lang="tsx">
import { computed, ref } from 'vue';
import { useRoute } from 'vue-router';
import type { MenuInfo, MenuMode } from 'ant-design-vue/es/menu/src/interface';
import { SimpleScrollbar } from '@sa/materials';
import { transformColorWithOpacity } from '@sa/utils';
import type { RouteKey } from '@elegant-router/types';
import { useAppStore } from '@/store/modules/app';
import { useThemeStore } from '@/store/modules/theme';
import { useRouteStore } from '@/store/modules/route';
import { useRouterPush } from '@/hooks/common/router';

defineOptions({
  name: 'BaseMenu'
});

interface Props {
  darkTheme?: boolean;
  mode?: MenuMode;
  menus: App.Global.Menu[];
}

const props = withDefaults(defineProps<Props>(), {
  mode: 'inline'
});

const route = useRoute();
const currentMenu = ref<RouteKey | null>(null);
const appStore = useAppStore();
const themeStore = useThemeStore();
const routeStore = useRouteStore();
const { routerPushByKey } = useRouterPush();

const menuTheme = computed(() => (props.darkTheme ? 'dark' : 'light'));

const isHorizontal = computed(() => props.mode === 'horizontal');

const siderCollapse = computed(() => themeStore.layout.mode === 'vertical' && appStore.siderCollapse);

const inlineCollapsed = computed(() => (props.mode === 'inline' ? siderCollapse.value : undefined));

const selectedKeys = computed(() => {
  const { hideInMenu, activeMenu } = route.meta;
  const name = route.name as string;

  const routeName = (hideInMenu ? activeMenu : name) || name;

  return [routeName];
});

const openKeys = computed(() => {
  if (isHorizontal.value || inlineCollapsed.value) return [];

  const [selectedKey] = selectedKeys.value;

  if (!selectedKey) return [];

  return routeStore.getSelectedMenuKeyPath(selectedKey);
});

const headerHeight = computed(() => `${themeStore.header.height}px`);

const selectedBgColor = computed(() => {
  const { darkMode, themeColor } = themeStore;

  const light = transformColorWithOpacity(themeColor, 0.1, '#ffffff');
  const dark = transformColorWithOpacity(themeColor, 0.3, '#000000');

  return darkMode ? dark : light;
});

function handleClickMenu(menuInfo: MenuInfo) {
  const key = menuInfo.key as RouteKey;

  const query = routeStore.getRouteQueryOfMetaByKey(key);

  routerPushByKey(key, { query });
  currentMenu.value = null;
}

function handleMenuTreeSelect(value: any, node: any) {
  if (!node?.children) {
    handleClickMenu(node);
    return;
  }
  currentMenu.value = (route.name as RouteKey) || null;
}
</script>

<template>
  <div v-if="!appStore.siderCollapse" class="menu-wrapper p8px pb-0" style="font-size: 0.9vw;">
    <ATreeSelect
      v-model:value="currentMenu"
      show-search
      :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
      placeholder="菜单搜索"
      tree-default-expand-all
      :tree-data="menus"
      tree-node-filter-prop="label"
      class="w-full"
      :field-names="{ label: 'label', value: 'key', children: 'children' }"
      :style="{ fontSize: '0.9vw' }"
    >
      <template #title="{ label, data }">
        <span :style="{ cursor: data?.children?.length ? 'not-allowed' : 'pointer', fontSize: '0.9vw' }">{{ label }}</span>
      </template>
    </ATreeSelect>
  </div>
  <SimpleScrollbar class="menu-wrapper" :class="{ 'select-menu': !darkTheme }" style="font-size: 0.9vw;">
    <AMenu
      :mode="mode"
      :theme="menuTheme"
      :items="menus"
      :selected-keys="selectedKeys"
      :open-keys="openKeys"
      :inline-collapsed="inlineCollapsed"
      :inline-indent="18"
      class="size-full transition-300 border-0!"
      :class="{ 'bg-container!': !darkTheme, 'horizontal-menu': isHorizontal }"
      :style="{ fontSize: '0.9vw' }"
      @click="handleClickMenu"
    />
  </SimpleScrollbar>
</template>

<style lang="scss" scoped>
.menu-wrapper {
  :deep(.ant-select) {
    .ant-select-selector {
      background-color: transparent;
      border-color: #1F77B4;
      .ant-select-selection-placeholder {
        color: #1F77B4;
      }
    }
    .ant-select-arrow .ant-select-suffix {
      color: #1F77B4;
    }
  }

  :deep(.ant-menu-inline) {
    .ant-menu-item {
      width: calc(100% - 16px);
      margin-inline: 8px;
      font-size: 0.86vw !important;
      border-radius: 4px;
      transition: all 0.3s;
    }

    // 一级菜单样式增强
    > .ant-menu-item,
    > .ant-menu-submenu > .ant-menu-submenu-title {
      font-weight: 500;
      padding-left: 0.8vw !important;

      &.ant-menu-item-selected,
      &.ant-menu-submenu-selected {
        background-color: #C6E0F7 !important;
      }

      &:hover {
        background-color: #e6f7ff !important;
      }
    }

    // 二级菜单样式区分
    .ant-menu-submenu {
      // 二级目录样式（可展开的菜单）
      > .ant-menu-submenu-title {
        font-weight: 500;
        font-size: 0.86vw !important;
        // background: linear-gradient(90deg, #e6f7ff, #fafafa);
        border-radius: 4px;
        width: calc(100% - 16px) !important;
        position: relative;

        // 选中状态的目录添加#1f77b4背景色
        &.ant-menu-submenu-selected {
          background-color: #1f77b4 !important;
          color: #ffffff !important;

          &::before {
            background-color: #ffffff;
          }
        }
      }

      // 三级菜单样式
      .ant-menu-submenu {
        > .ant-menu-submenu-title {
          font-weight: 400;
          font-size: 0.86vw !important;
          // background: linear-gradient(90deg, #EAE8E8, #f5f5f5);
          border-radius: 4px;
          width: calc(100% - 16px) !important;
          position: relative;
          font-weight: 500;
          // color: #1890ff;
          padding-left: 1.5vw !important;

          // 选中状态的三级目录添加#1f77b4背景色
          &.ant-menu-submenu-selected {
            background-color: #1f77b4 !important;
            color: #ffffff !important;
            &::before {
              background-color: #ffffff;
            }
          }
        }

        .ant-menu-item {
          font-size: 0.85vw !important;
          background-color: #F5F7FB;
          border-radius: 4px;
          width: calc(100% - 20px) !important;
          font-weight: 400;
          padding-left: 2.2vw !important;
        }
      }

      // 二级菜单项样式（不可展开的菜单）
      .ant-menu-item {
        font-size: 0.85vw !important;
        background-color: #fafafa;
        border-radius: 4px;
        width: calc(100% - 16px) !important;
        font-weight: 400;
        padding-left: 1.5vw !important;
        background-color: #F5F7FB;
      }
    }
  }

  :deep(.ant-menu-submenu-title) {
    width: calc(100% - 16px);
    margin-inline: 8px;
    border-radius: 4px;
    transition: all 0.3s;
  }

  :deep(.ant-menu-inline-collapsed) {
    > .ant-menu-item {
      padding-inline: calc(50% - 14px);
    }

    .ant-menu-item-icon {
      vertical-align: -0.25em;
    }

    .ant-menu-submenu-title {
      padding-inline: calc(50% - 14px);
    }
  }

  :deep(.ant-menu-horizontal) {
    .ant-menu-item {
      display: flex;
      align-items: center;
    }

    .ant-menu-submenu-title {
      display: flex;
      align-items: center;
    }
  }
}

.select-menu {
  :deep(.ant-menu-inline) {
    .ant-menu-item-selected {
      background-color: v-bind('selectedBgColor') !important;
      border-radius: 5px;
    }

    // 添加更具体的选择器以确保样式优先级
    .ant-menu-submenu.ant-menu-submenu-selected > .ant-menu-submenu-title {
      background: #1F77B4 !important;
      color: #fff !important;
    }

  }
}

.horizontal-menu {
  line-height: v-bind(headerHeight);
}
</style>
